<template>
  <view class="apply-page">
    <view class="tips">填写以下信息提交后，我们将在1-3个工作日内完成审核。</view>

    <view class="card">
      <view class="field">
        <text class="label">姓名</text>
        <input class="ipt" v-model.trim="form.name" placeholder="请输入真实姓名" />
      </view>
      <view class="field">
        <text class="label">手机号</text>
        <input class="ipt" v-model.trim="form.phone" placeholder="请输入手机号" />
      </view>
      <view class="field">
        <text class="label">门店名称</text>
        <input class="ipt" v-model.trim="form.store_name" placeholder="例如：XX小区惠购服务点" />
      </view>
      <view class="field">
        <text class="label">详细地址</text>
        <input class="ipt" v-model.trim="form.address" placeholder="请输入详细地址" />
      </view>
      <view class="field">
        <text class="label">服务半径(米)</text>
        <input class="ipt" type="number" v-model.number="form.service_radius" placeholder="例如：2000" />
      </view>
      <view class="field area">
        <text class="label">备注</text>
        <textarea class="ta" v-model.trim="form.remark" placeholder="可补充配送时间、车辆等优势" />
      </view>
    </view>

    <view class="ops">
      <button class="btn" :loading="submitting" @tap="submit">提交申请</button>
    </view>
  </view>
</template>

<script setup>
// 中文注释：团长申请页面
import { reactive, ref, getCurrentInstance } from 'vue'
import { leaderApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const form = reactive({
  name: '',
  phone: '',
  store_name: '',
  address: '',
  service_radius: 2000,
  remark: ''
})

const submitting = ref(false)

const validate = () => {
  if (!form.name) return '请填写姓名'
  if (!/^1[3-9]\d{9}$/.test(String(form.phone))) return '请填写正确的手机号'
  if (!form.store_name) return '请填写门店名称'
  if (!form.address) return '请填写详细地址'
  if (!form.service_radius || Number(form.service_radius) <= 0) return '请填写服务半径'
  return ''
}

const submit = async () => {
  const msg = validate()
  if (msg) return uni.showToast({ title: msg, icon: 'none' })
  if (submitting.value) return
  submitting.value = true
  try {
    await leaderApi.applyLeader({ ...form })
    uni.showToast({ title: '提交成功，等待审核', icon: 'success' })
    setTimeout(() => uni.navigateBack({ delta: 1 }), 600)
  } catch (e) {
    proxy?.$showToast?.('提交失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped lang="scss">
.apply-page { padding: 24rpx; }
.tips { color: #999; font-size: 24rpx; margin-bottom: 16rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 16rpx 24rpx; }
.field { display: flex; align-items: center; padding: 18rpx 0; border-bottom: 1px solid #f5f5f5; }
.field.area { align-items: flex-start; }
.field:last-child { border-bottom: none; }
.label { width: 180rpx; color: #333; font-size: 28rpx; }
.ipt { flex: 1; height: 64rpx; line-height: 64rpx; font-size: 28rpx; }
.ta { flex: 1; height: 160rpx; font-size: 26rpx; padding: 12rpx 0; }
.ops { margin-top: 28rpx; }
.btn { width: 100%; height: 84rpx; line-height: 84rpx; background: #16c79a; color: #fff; border: 0; border-radius: 12rpx; font-size: 30rpx; }
</style>
